<script setup lang="ts">
import { ref } from 'vue'
import useApi from '../useApi';
import msgModal from '../components/msgModal.vue'
import NumericKeyboard from '../components/NumericKeyboard.vue'  // Fixed import path

const msgModalRef = ref(msgModal);
const showModal = (title,times=1000) => {
	if(msgModalRef.value){
		msgModalRef.value.openMsg(title,times);
	}
}



let phoneNumSearch = ref(''),memberSearchShow = ref(false),orderList:any = ref({});
let orderDetailShow = ref(false),orderInfoDetail:any = ref({});
let address:any = ref({});

// 处理数字键盘输入
const handleKeyboardInput = (value) => {
    phoneNumSearch.value = value;
}

// 处理数字键盘确认
const handleKeyboardConfirm = (value) => {
    phoneNumSearch.value = value;
    searchOrderInfo();
}

// 添加取消事件处理
const handleKeyboardCancel = () => {
    memberSearchShow.value = false;
}

const orderDetail = async(id) => {
	orderDetailShow.value = true;
	let bodyData = ref({});
    bodyData.value = {
        id:id
    }
    const options:any = {
        headers: {
            "Content-Type": "application/json",
            "token":localStorage.getItem('token')
        },
        method: "POST",
        body:JSON.stringify(bodyData.value)
    };
    let res:any = await useApi('order/getDorderDetail',options); 
    if(res.code == 1){
        orderInfoDetail.value = res.data.detail;
		address.value = res.data.address;
    }else{
        showModal(res.msg);
    }
}
const searchOrderInfo = () =>{
	getOrderInfo();
}
const getOrderInfo = async()=>{
    let bodyData = ref({});
    bodyData.value = {
        phone:phoneNumSearch.value
    }
    const options:any = {
        headers: {
            "Content-Type": "application/json",
            "token":localStorage.getItem('token')
        },
        method: "POST",
        body:JSON.stringify(bodyData.value)
    };
    let res:any = await useApi('order/getDorder',options); 
    if(res.code == 1){
        orderList.value = res.data;
    }else{
        showModal(res.msg);
    }
}
</script> 
<template>
	<msgModal ref="msgModalRef"/>
	<main class="disorder">
		<!-- 使用NumericKeyboard组件替换原有键盘 -->
		<NumericKeyboard
			v-model:visible="memberSearchShow"
			:initial-value="phoneNumSearch"
			title="请输入手机号码"
			@input="handleKeyboardInput"
			@confirm="handleKeyboardConfirm"
			@cancel="handleKeyboardCancel"
		/>
		
		<!-- 优化订单详情弹窗 -->
		<Transition name="fade">
			<div class="order-detail-modal" v-show='orderDetailShow'>
				<div class="order-detail-container">
					<div class="order-detail-header">
						<h3>配送订单详情</h3>
						<button @click="orderDetailShow = false" class="close-btn">×</button>
					</div>
					
					<div class="address-info">
						<div class="info-label">配送地址：</div>
						<div class="info-content">{{ address.province }}-{{ address.city }}-{{ address.area }}-{{ address.address }}</div>
					</div>
					
					<div class="contact-info">
						<div class="info-label">联系人：</div>
						<div class="info-content">{{ address.name }} {{ address.phone }}</div>
					</div>
					
					<div class="order-items">
						<table class="items-table">
							<thead>
								<tr>
									<th>商品名称</th>
									<th>单价</th>
									<th>数量</th>
									<th>小计</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="(data,index) in orderInfoDetail" :key="index">
									<td>{{ data.goodName }}</td>
									<td>¥{{ data.goodPrice }}</td>
									<td>{{ data.goodNum }}</td>
									<td>¥{{ data.allPrice }}</td>
								</tr>
							</tbody>
						</table>
					</div>
					
					<div class="order-detail-footer">
						<button @click="orderDetailShow = false" class="close-detail-btn">关闭</button>
					</div>
				</div>
			</div>
		</Transition>
		
		<!-- 优化搜索区域 -->
		<div class="search-section">
			<div class="search-container">
				<div class="search-input-group">
					<span class="search-icon">🔍</span>
					<input 
						class="search-input" 
						@click="memberSearchShow = true;" 
						v-model="phoneNumSearch" 
						placeholder="请输入手机号查询配送订单"
						readonly
					>
				</div>
				<button @click="searchOrderInfo" class="search-btn">查询</button>
			</div>
		</div>
		
		<!-- 优化订单列表 -->
		<div class="order-list-section">
			<table class="order-table">
				<thead>
					<tr>
						<th>配送信息</th>
						<th>订单金额</th>
						<th>商品数量</th>
						<th>下单时间</th>
						<th>订单状态</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(data,index) in orderList" :key="index">
						<td>
							<div class="user-info">
								<span class="phone">{{ data.userPhone }}</span>
								<span class="name">({{ data.userNickname }})</span>
							</div>
						</td>
						<td class="price">¥{{ data.allPrice }}</td>
						<td class="quantity">{{ data.allNum }}</td>
						<td class="time">{{ data.created_at }}</td>
						<td>
							<span class="status-badge" :class="'status-' + data.status">{{ data.statusTitle }}</span>
						</td>
						<td class="actions">
							<button @click="orderDetail(data.id)" class="detail-btn">查看详情</button>
						</td>
					</tr>
					<tr v-if="!orderList || orderList.length === 0">
						<td colspan="6" class="no-data">暂无配送订单数据</td>
					</tr>
				</tbody>
			</table>
		</div>
    </main>
</template>

<style lang="scss" scoped>
.disorder {
	padding: 20px;
	height: 100%;
	display: flex;
	flex-direction: column;
	
	// 搜索区域样式
	.search-section {
		margin-bottom: 5px;
		
		.search-container {
			display: flex;
			align-items: center;
			gap: 15px;
			
			.search-input-group {
				flex: 1;
				position: relative;
				
				.search-icon {
					position: absolute;
					left: 12px;
					top: 50%;
					transform: translateY(-50%);
					color: #999;
				}
				
				.search-input {
					width: 100%;
					height: 42px;
					padding: 0 15px 0 40px;
					border-radius: 6px;
					border: 1px solid #ddd;
					font-size: 15px;
					transition: all 0.3s;
					
					&:focus {
						border-color: #1976D2;
						box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
						outline: none;
					}
					
					&::placeholder {
						color: #aaa;
					}
				}
			}
			
			.search-btn {
				height: 42px;
				padding: 0 25px;
				background-color: #1976D2;
				color: white;
				border: none;
				border-radius: 6px;
				font-size: 15px;
				cursor: pointer;
				transition: all 0.2s;
				
				&:hover {
					background-color: #1565C0;
				}
				
				&:active {
					transform: translateY(1px);
				}
			}
		}
	}
	
	// 订单列表样式
	.order-list-section {
		flex: 1;
		overflow: auto;
		background-color: white;
		border-radius: 8px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
		
		.order-table {
			width: 100%;
			border-collapse: collapse;
			
			th, td {
				padding: 15px;
				text-align: left;
				border-bottom: 1px solid #eee;
			}
			
			th {
				background-color: #f5f7fa;
				color: #606266;
				font-weight: 500;
				white-space: nowrap;
			}
			
			.user-info {
				display: flex;
				flex-direction: column;
				
				.phone {
					font-weight: 500;
				}
				
				.name {
					color: #606266;
					font-size: 13px;
				}
			}
			
			.price {
				font-weight: 500;
				color: #f56c6c;
			}
			
			.quantity {
				font-weight: 500;
			}
			
			.time {
				color: #606266;
				font-size: 13px;
			}
			
			.status-badge {
				display: inline-block;
				padding: 4px 10px;
				border-radius: 12px;
				font-size: 13px;
				
				&.status-1 {
					background-color: #e1f5fe;
					color: #0288d1;
				}
				
				&.status-2 {
					background-color: #e8f5e9;
					color: #388e3c;
				}
				
				&.status-3 {
					background-color: #fff8e1;
					color: #ffa000;
				}
			}
			
			.actions {
				.detail-btn {
					padding: 6px 12px;
					background-color: #1976D2;
					color: white;
					border: none;
					border-radius: 4px;
					cursor: pointer;
					transition: all 0.2s;
					
					&:hover {
						background-color: #1565C0;
					}
				}
			}
			
			.no-data {
				text-align: center;
				color: #909399;
				padding: 30px;
			}
		}
	}
	
	// 键盘弹窗样式
	.keyboard-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
		
		.keyboard-container {
			width: 400px;
			background-color: white;
			border-radius: 8px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
			overflow: hidden;
			
			.keyboard-header {
				padding: 15px;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #eee;
				
				.input-display {
					flex: 1;
					height: 40px;
					line-height: 40px;
					padding: 0 15px;
					background-color: #f5f7fa;
					border-radius: 4px;
					font-size: 18px;
					overflow: hidden;
				}
				
				.clear-btn {
					margin-left: 10px;
					padding: 0 15px;
					height: 40px;
					background-color: #f56c6c;
					color: white;
					border: none;
					border-radius: 4px;
					cursor: pointer;
					
					&:hover {
						background-color: #e64a4a;
					}
				}
			}
			
			.numKey {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 10px;
				padding: 15px;
				
				.key {
					height: 60px;
					background-color: #f5f7fa;
					border: none;
					border-radius: 4px;
					font-size: 20px;
					cursor: pointer;
					transition: all 0.2s;
					
					&:hover {
						background-color: #e4e7ed;
					}
					
					&:active {
						transform: translateY(2px);
					}
					
					&.delete-key {
						background-color: #e1f5fe;
						color: #0288d1;
						
						&:hover {
							background-color: #b3e5fc;
						}
					}
				}
			}
			
			.keyboard-footer {
				display: flex;
				padding: 15px;
				border-top: 1px solid #eee;
				
				button {
					flex: 1;
					height: 45px;
					border: none;
					border-radius: 4px;
					font-size: 16px;
					cursor: pointer;
					transition: all 0.2s;
					
					&.confirm-btn {
						background-color: #1976D2;
						color: white;
						margin-right: 10px;
						
						&:hover {
							background-color: #1565C0;
						}
					}
					
					&.cancel-btn {
						background-color: #f5f7fa;
						color: #606266;
						
						&:hover {
							background-color: #e4e7ed;
						}
					}
				}
			}
		}
	}
	
	// 订单详情弹窗样式
	.order-detail-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
		
		.order-detail-container {
			width: 700px;
			max-height: 80vh;
			background-color: white;
			border-radius: 8px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
			overflow: hidden;
			display: flex;
			flex-direction: column;
			
			.order-detail-header {
				padding: 15px 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #eee;
				
				h3 {
					margin: 0;
					color: #303133;
				}
				
				.close-btn {
					width: 30px;
					height: 30px;
					background: none;
					border: none;
					font-size: 24px;
					color: #909399;
					cursor: pointer;
					
					&:hover {
						color: #f56c6c;
					}
				}
			}
			
			.address-info, .contact-info {
				padding: 15px 20px;
				display: flex;
				border-bottom: 1px solid #f0f0f0;
				
				.info-label {
					width: 80px;
					color: #606266;
					flex-shrink: 0;
				}
				
				.info-content {
					flex: 1;
					color: #303133;
				}
			}
			
			.order-items {
				flex: 1;
				overflow: auto;
				padding: 0 20px;
				
				.items-table {
					width: 100%;
					border-collapse: collapse;
					margin: 15px 0;
					
					th, td {
						padding: 12px 8px;
						text-align: left;
						border-bottom: 1px solid #eee;
					}
					
					th {
						color: #606266;
						font-weight: 500;
						background-color: #f5f7fa;
					}
				}
			}
			
			.order-detail-footer {
				padding: 15px 20px;
				display: flex;
				justify-content: flex-end;
				border-top: 1px solid #eee;
				
				.close-detail-btn {
					padding: 8px 20px;
					background-color: #1976D2;
					color: white;
					border: none;
					border-radius: 4px;
					cursor: pointer;
					transition: all 0.2s;
					
					&:hover {
						background-color: #1565C0;
					}
				}
			}
		}
	}
}

// 过渡动画
.fade-enter-active, .fade-leave-active {
	transition: opacity 0.3s, transform 0.3s;
}
.fade-enter-from, .fade-leave-to {
	opacity: 0;
	transform: scale(0.95);
}
</style>